<template>
    <div>
        <div class="top-filter">
            <template v-for="item in useStatusArr">
                <div :key="item.useStatus" :class="useStatus == item.useStatus
                ? `filter-item status-${item.useStatus} active-status-${item.useStatus}`
                : `filter-item status-${item.useStatus}`
                " @click="onStatusChange(item.useStatus)"
                    v-show="!(isSupervisor && (item.useStatus == 'submit' || item.useStatus == 'draft')) && !(isSupOrg && item.useStatus == 'draft')">
                    <div class="num">{{ item.num }}</div>
                    <div class="name">{{ item.useStatusName }}</div>
                </div>
            </template>
        </div>
        <van-collapse v-model="activeNames" v-if="equipData.length > 0" class="noBorder">
            <van-collapse-item :name="item.equipmentName" v-for="(item, index) in equipData" :key="index">
                <template #title>
                    <div class="collapse-title">
                        <img
                            :src="require(`../../../../../assets/img/qzjx/mobile/${item.equipmentType ? item.equipmentType.toUpperCase() : 'QT'}.png`)" />
                        <span class="collapse-name">{{ item.equipmentName }}({{ item.num }})</span>
                    </div>
                </template>
                <div v-for="(eqm, index) in item.eqmMobileRegisters" :key="index" @click="detail(eqm)"
                    class="content-box">
                    <span class="code">{{ eqm.recordCode || '--' }}</span>
                    <span class="time">{{ eqm.enterTime ? `进场时间：${eqm.enterTime}` : '--' }}</span>
                </div>
            </van-collapse-item>
        </van-collapse>
        <van-empty description="暂无数据" v-else />
    </div>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
    disableCache() {
        return false;
    }
    mixin() {
        return {
            props: {
                engineeId: {
                    props: {
                        type: String,
                        default: ''
                    }
                },
                isSupervisor: {// 是否是监督员
                    props: {
                        type: Number,
                        default: () => {
                            return 0
                        }
                    }
                },
                isSupOrg: {// 是否是监理
                    props: {
                        type: Number,
                        default: () => {
                            return 0
                        }
                    }
                }
            },
            data() {
                return {
                    activeNames: [],
                    useStatusArr: [
                        {
                            useStatus: "draft",
                            useStatusName: "草稿",
                            num: 0
                        },
                        {
                            useStatus: "submit",
                            useStatusName: "待审核",
                            num: 0
                        },
                        {
                            useStatus: "enter",
                            useStatusName: "已进场",
                            num: 0
                        },
                        {
                            useStatus: "exit",
                            useStatusName: "已退场",
                            num: 0
                        }

                    ],//状态统计
                    equipData: [],// 设备数据
                    useStatus: 'enter'
                };
            },
            mounted() {
                this.getCountByUseStatus();
                this.getEqmMobile();
            },
            methods: {
                // 进场状态统计
                getCountByUseStatus() {
                    this.$f7.request.post(
                        `/equipment/eqmMobileRegister/countByUseStatus`, {
                        query: {
                            engineeId: this.engineeId,
                        }
                    },
                        (r) => {
                            r = JSON.parse(r);
                            if (r && r.success) {
                                const data = r.parameters?.data || [];
                                this.useStatusArr.forEach(item => {
                                    item.num = data.find(v => v.useStatus == item.useStatus)?.num
                                });
                            } else {
                                this.$toast(r.message || "获取失败，请稍后重试");
                            }
                        }
                    );
                },
                // 状态筛选
                onStatusChange(useStatus) {
                    this.useStatus = this.useStatus == useStatus ? '' : useStatus;
                    this.getEqmMobile();
                },
                // 获取设备信息
                getEqmMobile() {
                    this.$f7.request.post(
                        `/equipment/eqmMobileRegister/queryTree`, {
                        query: {
                            engineeId: this.engineeId,
                            useStatus: this.useStatus
                        }
                    },
                        (r) => {
                            r = JSON.parse(r);
                            if (r && r.success) {
                                this.equipData = r.parameters?.data || [];
                                if (this.equipData.length) {
                                    this.activeNames = [this.equipData[0].equipmentName]
                                }
                            } else {
                                this.$toast(r.message || "获取失败，请稍后重试");
                            }
                        }
                    );
                },
                // 进入设备详情
                detail(item) {
                    this.$f7router.navigate(
                        `/business/qzjx/mobileEquipment/equip/detail?pageAction=view&registerId=${item.registerId}&engineeId=${this.engineeId}&useStatus=${item.useStatus}`
                    );
                }
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../assets/css/commonPage.less");

@{deep} .content-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 0;
    padding: 13px 0;

    &:last-child {
        border-bottom: none;
    }

    .code {
        color: #333;
        font-size: 14px;
    }

    .time {
        color: #8995ac;
        font-size: 12px;
    }
}

.top-filter {
    display: flex;
    padding: 10px 15px;

    .filter-item {
        height: 70px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 4px;

        .num {
            font-size: 18px;
            font-weight: 600;
        }

        .name {
            font-size: 14px;
        }

        +.filter-item {
            margin-left: 10px;
        }
    }

    .status-enter {
        color: #3385ff;
    }

    .status-exit {
        color: #61677a;
    }

    .status-draft {
        color: #ff9f24;
    }

    .status-submit {
        color: #27D0D9;
    }

    .active-status-enter {
        box-shadow: 0px 6px 16px 0px rgba(100, 163, 222, 0.2);
        border: 1px solid #89beff;
    }

    .active-status-exit {
        box-shadow: 0px 6px 16px 0px rgba(147, 162, 176, 0.2);
        border: 1px solid #b5b7bd;
    }

    .active-status-draft {
        box-shadow: 0px 6px 16px 0px rgba(235, 189, 117, 0.2);
        border: 1px solid #f5c07b;
    }

    .active-status-submit {
        box-shadow: 0px 6px 16px 0px rgba(128, 214, 224, 0.2);
        border: 1px solid #80D6E0;
    }
}

@{deep} .van-collapse {
    padding: 0 16px;
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;

    .van-collapse-item__title {
        display: flex;
        align-items: center;
        padding: 10px 15px;
    }

    .van-collapse-item--border::after {
        border-top: none;
    }

    .van-collapse-item__content {
        margin-bottom: 10px;
        padding: 0 16px;
    }

    .collapse-title {
        display: flex;
        align-items: center;

        img {
            width: 46px;
            height: 46px;
            margin-right: 15px;
        }

        .collapse-name {
            font-weight: 600;
            font-size: 15px;
            color: #242424;
        }
    }
}
</style>
